import React, { Component } from 'react';
import instance from './api/instance';
import styles from './App.module.scss';
// console.log(styles);
export default class App extends Component {
  // state => vue data
  state = {
    carts: {},
  };
  // vue => mounted
  componentDidMount() {
    // instance.get('/manifest.json').then((res) => {
    //   console.log(res);
    // });
    instance.get('/getCarts').then((res) => {
      // console.log(res);
      this.setState({
        carts: res.data,
      });
    });
  }

  render() {
    // this.state.carts
    // console.log(this.state.carts);
    let carts = this.state.carts;
    let totalNum = 0;
    /* css 模块技术，方便统一修改，类名统一变成驼峰的形式 */
    carts.cartGroupList &&
      carts.cartGroupList.forEach((v) => {
        // console.log(v);
        if (v.checked) {
          // console.log(v);
          v.cartItemList.forEach((vv) => {
            if (vv.checked) {
              totalNum += vv.cnt;
            }
          });
        }
      });

    return (
      <div className={styles.myCart}>
        <div className={styles.myCartBody}></div>
        <div className={styles.myCartBottom}>
          <div className={styles.cartBottomLeft}>
            <i
              className={
                'iconfont icon-xuanzhong ' + (true ? styles.selected : '')
              }
            ></i>
            <span className={styles.selectItem}>已选({totalNum})</span>
          </div>
          <div className={styles.cartBottomRight}>
            <div className={styles.bottomRightPrice}>
              <div className={styles.rightPriceTop}>
                合计：￥{carts.actualPrice}
              </div>
              <div className={styles.rightPriceBottom}>
                以优惠：￥{carts.promotionPrice}
              </div>
            </div>
            <div className={styles.bottomRightOrder}>下单</div>
          </div>
        </div>
      </div>
    );
  }
}
